// pages/classDetail/classDetail.js
import profile from '../../profile'

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    lang: app.globalData.language,

    index: profile.classDetail,

    videoIsPlay: false,

    classLike: profile.classDetail.classLike,
    likeNumber: profile.classDetail.likeNumber,

    infoIsOpen: false,

    bg: '../../images/tab_box_bg0.png',
    tabNum: 0,
    tabList: profile.classDetail.tabList,

    // 互动作品
    items: profile.classDetail.classProList,
    masonryHeight: 0,
    
    // 是否打开评论
    isCommentOpen: false,
    commentList: profile.classDetail.commentList,
    // 评论内容
    commentValue: '',

    // 是否打开上传作品
    isUploadOpen: false,
    // 上传作品名称
    uploadValue: '',
    uploadedImg: '',
    isLong: false
  },

  // 上传作品提交事件
  submitUploadTap: function (e) {
    let list = this.data.items, value = this.data.uploadValue, uploadedImg = this.data.uploadedImg, id = Math.random(), userInfoNickName = '',userInfoImg = '', newObj = {};
    if (uploadedImg == ''){
      wx.showModal({
        title: '错误！',
        content: '请上传您的作品！',
        showCancel: false,
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          }
        }
      })
      return;
    }
    if (value == ''){
      wx.showModal({
        title: '错误！',
        content: '请输入您作品的名称！',
        showCancel: false,
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          }
        }
      })
      return;
    }
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        newObj.id = id;
        newObj.image = uploadedImg;
        newObj.type = "2";
        newObj.name = value;
        newObj.like = false;
        newObj.likeNum = 0;
        newObj.author = res.userInfo.nickName;
        newObj.userImg = res.userInfo.avatarUrl;

        list.push(newObj);
        this.setData({
          isUploadOpen: false,
          uploadValue: '',
          items: list
        })
        profile.classDetail.classProList = list;
      }
    })
  },

  // 上传作品名称输入侦听事件
  uploadValueInput: function (e) {
    let value = e.detail.value;
    this.setData({
      uploadValue: value
    })
  },

  // 上传图片事件
  uploadProductTap: function(e) {
    let that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths);
        that.setData({
          uploadedImg: tempFilePaths
        })
      }
    })
  },

  // 打开上传作品事件
  uploadProduct: function(e) {
    this.setData({
      isCommentOpen: false,
      isUploadOpen: true,
    })
  },

  // 提交评论事件
  submitCommentTap: function(e) {
    let comment = this.data.commentList, value = this.data.commentValue, id = Math.random(), userInfoNickName = '',userInfoImg = '', newObj = {};
    let list = comment.list;
    if (value == ''){
      wx.showModal({
        title: '错误！',
        content: '请输入您的评论',
        showCancel: false,
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          }
        }
      })
      return;
    }
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        newObj.img = res.userInfo.avatarUrl;
        newObj.user = res.userInfo.nickName;
        newObj.id = id;
        newObj.content = value;
        newObj.like = false;
        newObj.likeNum = 0;

        list.push(newObj);
        comment.commNum ++;
        comment.list = list;
        this.setData({
          isCommentOpen: false,
          commentValue: '',
          commentList: comment
        })
        profile.exhibitionDetail.commentList = comment;
      }
    })
  },

  // 评论输入侦听事件
  commentInput: function(e) {
    let value = e.detail.value;
    this.setData({
      commentValue: value
    })
  },

  // 关闭评论开关事件
  closeCommentTap: function(e){
    this.setData({
      isUploadOpen: false,
      isCommentOpen: false
    })
  },

  // 打开评论开关事件
  openCommentTap: function(e){
    this.setData({
      isUploadOpen: false,
      isCommentOpen: true
    })
  },

  // 评论点赞事件
  commentLikeTap: function(e) {
    let comment = this.data.commentList, id = e.detail.id;
    let list = comment.list;
    for (let i=0;i<list.length;i++){
      if (id == list[i].id) {
        if (list[i].like) {
          list[i].like = false;
          list[i].likeNum --;
          comment.likeNum --;
        }else{
          list[i].like = true;
          list[i].likeNum ++;
          comment.likeNum ++;
        }
      }
    }
    comment.list = list;
    this.setData({
      commentList: comment
    })
    profile.classDetail.commentList = comment;
  },

  // 单个作品like点击事件
  likeTap: function(e) {
    let id = e.detail.id, list = this.data.items;
    for (let i=0;i<list.length;i++){
        if (id == list[i].id) {
          if (list[i].like == true) {
            list[i].like = false;
            list[i].likeNum --;
            continue;
          }
          list[i].like = true;
          list[i].likeNum ++;
        }
    }
    this.setData({
      items: list
    })
    profile.classDetail.classProList = list;
    this._doRefreshMasonry(this.data.items);
    this.masonryHeightFun(300);
  },

  // 课程内容折叠事件
  infoFoldTap: function(e) {
    let confirm = !this.data.infoIsOpen
    this.setData({
      infoIsOpen: confirm
    })
  },

  // 课程like点击事件
  classLikeTap: function (e) {
    let like = this.data.classLike, num = this.data.likeNumber;
    if (like){
      like = false
      num --;
    }else{
      like = true
      num ++;
      console.log(like);
    }
    this.setData({
      classLike: like,
      likeNumber: num
    })
    profile.classDetail.classLike = like;
    profile.classDetail.likeNumber = num;
  },

  // 视频播放完毕
  videoComplete: function (e) {
    this.setData({
      videoIsPlay: false
    })
  },

  // 视频点击播放事件
  videoPlayTap: function(e) {
    let videoObj = wx.createVideoContext('video');
    videoObj.play();
    this.setData({
      videoIsPlay: true
    })
  },

  // tab 点击事件
  tabTap: function(e) {
    let id = e.detail.id, list = this.data.tabList, bg = '', tabNum = 0;
    for (let i=0;i<list.length;i++){
      if (id == list[i].id) {
        list[i].onthis = true;
        tabNum = list[i].id;
        if (list.length == 2){
          bg = '../../images/tab_box_bg2_'+ list[i].id +'.png';
        }else{
          bg = '../../images/tab_box_bg'+ list[i].id +'.png';
        }
      }else{
        list[i].onthis = false;
      }
    }
    this.setData({
      tabList: list,
      bg: bg,
      tabNum: tabNum
    })
    if (id == 2){
      this._doRefreshMasonry(this.data.items);
      this.masonryHeightFun(300);
    }
  },

  // 语言切换事件
  menuTap: function (e) {
    this.setData({
      lang: e.detail.lang
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '艺享家'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Artist'
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //console.log(options);
    let id = decodeURIComponent(options.tabIndex), list = this.data.tabList, bg = '';
    for (let i=0;i<list.length;i++){
      if (id == list[i].id) {
        list[i].onthis = true;
      }else{
        list[i].onthis = false;
      }
      if (list.length == 2){
        bg = '../../images/tab_box_bg2_'+ id +'.png';
      }else{
        bg = '../../images/tab_box_bg'+ id +'.png';
      }
    }
    this.setData({
      tabList: list,
      tabNum: id,
      bg: bg,
      isLong: app.globalData.model,
    })
    if (id == 2){
      this._doRefreshMasonry(this.data.items);
      this.masonryHeightFun(300);
    }

    //let list = this.data.tabList, bg = '';
    // if (list.length == 2) {
    //   bg = '../../images/tab_box_bg2_0.png'
    // }else{
    //   bg = '../../images/tab_box_bg0.png'
    // }
    // this.setData({
    //   isLong: app.globalData.model,
    //   bg
    // })
    //this._doRefreshMasonry(this.data.items);
  },

  // 页面到底部事件 -- 增加瀑布流内容
  // onReachBottom: function () {
  //   this._doAppendMasonry(this.data.items);
  // },

  // 刷新瀑布流
  _doRefreshMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.start(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 增加瀑布流内容
  _doAppendMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry')
    // 获取接口数据后使用瀑布流组件append方法，当append完成后调用then，是否可触底价在的标志位可以在这里处理
    this.masonryListComponent.append(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 瀑布流容器高度获取与设置
  masonryHeightFun: function (time) {
    let height = this.data.masonryHeight;
    setTimeout(() => {
      let query = wx.createSelectorQuery();
      query.select('#masonry').boundingClientRect(rect=>{
        height = rect.height;
        this.setData({
          masonryHeight: height
        })
      }).exec();
    }, time);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //this.masonryHeightFun(1000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      lang: app.globalData.language,
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '艺享家'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Artist'
      })
    }
  },
})